<template lang="pug">
  .my-charts(ref="myCharts")
</template>

<script setup>
import {ref, onMounted, watch} from "vue"
import * as echarts from 'echarts'

const props = defineProps({
  options: Object,
})

const myCharts = ref()
let chart = {}

watch(props.options, (newValue) => {
  chart.setOption(newValue);
},{
  deep: true
})

onMounted(() => {
  chart = echarts.init(myCharts.value, 'dark')
  chart.setOption(props.options);

  window.onresize = function () {
    chart.resize();
  };
})

</script>

<style lang="scss" scoped>

.my-charts {
  width: 100%;
  flex: 1;
}

</style>